<template>
  <div class="seckill-cont">

    <van-list
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      finished-text=""
      @load="onLoad">
      <!--  活动列表单体 start  -->
      <div class="seckill-item" v-for="(item,index) in skillList" :key="index">
        <div class="seckill-item-top">
          <div class="seckill-item-top-left">
            <div class="left-item"><span class="left-item-label">待收益佣金：</span><span>{{ item.wait_commission }}</span></div>
            <div class="left-item" v-if="item.has_buy == 1"><span class="left-item-label">已获得佣金：</span><span>{{ item.gain_commission }}</span></div>
            <div class="left-item" v-if="item.has_buy == 0"><span class="left-item-label">可获得佣金：</span><span>{{ item.frozen_commission }}</span></div>
          </div>
          <div class="seckill-item-top-right">活动{{ item.status == 1 ? '进行中':'已结束' }}</div>
        </div>
        <div class="seckill-item-cont">
          <div class="seckill-item-img">
            <img :src="item.img" alt="">
          </div>
          <div class="seckill-item-right">
            <div class="seckill-item-title">{{ item.title }}</div>
            <div class="seckill-item-price"><span v-html="scaleGoodsPriceFn(item.miao_price)"></span></div>
          </div>
        </div>
        <div class="seckill-item-btn">
          <div class="seckill-item-btn-item" @click="navToDetail(item.item_miao_id)">查看详情</div>
          <div class="seckill-item-btn-item item-buy" v-if="item.status == 1 && item.has_buy != 1" @click="nowBuyToItemDetail(item.item_miao_id, item.item_id)">立即购买</div>
        </div>
      </div>
    <!--  活动列表单体 end  -->
    </van-list>

  </div>
</template>

<script>
import Vue from 'vue'
import { scaleGoodsPrice } from '@/utils/index.js'
import { GetSkillList } from '@/api/dz/twelve.js'

import { List } from 'vant'

Vue.use(List)

export default Vue.extend({
  data() {
    return {
      skillList: [],
      finished: false,
      listParams: {
        p: 1
      },
      loading: false,
      error: false
    }
  },

  created() {
    this.onLoad()
  },

  mounted() {
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },

  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },

    navToDetail(id) {
      this.$JumpName(this, 'twelveSeckillDetail', { id: id })
    },

    nowBuyToItemDetail(mid, id) {
      this.$JumpName(this, 'item-detail', { detailId: id, item_miao_id: mid })
    },

    // 加载更多
    onLoad() {
      GetSkillList(this.listParams).then(res => {
        this.loading = false
        if (res.status == 1) {
          if (res.data && res.data.length > 0) {
            this.skillList.push(...res.data)

            this.listParams.p++
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      }).catch(() => {
        this.error = true
      })
    }
  }
})
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .seckill-cont {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;

    .seckill-item {
      background: #fff;
      border-radius: 8px;
      width: 100%;
      padding: 20px 16px;
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }

      &-top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        &-left {
          .left-item {
            margin-bottom: 6px;
            span {
              color: #F42B2B;
            }
            &-label {
              color: #666666 !important;
            }
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        &-right {
          font-size: 26px;
          font-weight: 500;
          color: #f42b2b;
        }
      }

      &-cont {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }

      &-img {
        width: 190px;
        height: 190px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      &-right {
        width: calc(100% - 206px);
        padding: 10px 0;
        position: relative;
      }

      &-title {
        @include lineClamp(28px,1.4,2);
      }

      &-price {
        position: absolute;
        left: 0;
        bottom: 10px;
      }

      &-btn {
        width: 100%;
        text-align: right;
        margin-top: 10px;
        &-item {
          display: inline-block;
          border: 2px solid #ec2213;
          border-radius: 40px;
          padding: 8px 24px;
          font-size: 28px;
          color: #ec2213;
          margin-left: 16px;
          &:first-child {
            margin: 0;
          }
        }
        .item-buy {
          background: #ec2213;
          color: #fff;
        }
      }
    }
  }
</style>
